{notempty name="tag_list"}
    {volist name="tag_list" id="tag_group"}
        <div class="tag-select-block clearfix">
            <div class="select-cate">{$tag_group.title}：</div>
            <div class="select-option">
                {volist name="tag_group['tag_list']" id="tag"}
                    <div class="one_tag"><a class="btn btn-default" data-role="add_tag" data-id="{$tag.id}">{$tag.title}</a></div>
                {/volist}
            </div>
        </div>
    {/volist}
{else/}
    <div style="text-align: center;font-size: 22px;color: #B3B3B3;">
        <p>
            <br/>
            <span>{:lang('_PERSONAL_TAB_NONE_')}{:lang('_WAVE_')}</span>
            <br/>
        </p>
    </div>
{/notempty}
<div class="tag-select-block clearfix">
    <div class="select-cate">{:lang('_PERSONAL_TAB_')}{:lang('_COLON_')}</div>
    <div class="select-option my-tag-block">
        <div data-role="my_tag_block">
            {volist name="my_tag" id="tag"}
                <div class="one_tag"><span class="btn btn-default">{$tag.title} <a class="icon-remove" data-role="remove_tag" data-id="{$tag.id}"></a></span></div>
            {/volist}
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="tag-select-block clearfix">
    <div class="select-option">
        <button class="btn btn-primary" data-role="set-tag">{:lang('_SAVE_')}</button>
        {php}if(check_step_can_skip('set_tag')){{/php}
        <a href="{:Url('ucenter/member/step', array('step' => get_next_step('set_tag')))}"
           style="margin-left: 30px;line-height: 18px;display: inline-block;margin-top: 6px;">{:lang('_STEP_')}</a>
        {php}}{/php}
    </div>
</div>

<script>
    var tag_ids="{$my_tag_ids}";
    $(function(){
        $('[data-role="add_tag"]').click(function(){
            var attachId=$(this).attr('data-id');
            var already_show=upHiddenVal('add',attachId);
            if(already_show==0){
                var title=$(this).html();
                $('[data-role="my_tag_block"]').append('<div class="one_tag"><span class="btn btn-default">'+title+' <a class="icon-remove" data-role="remove_tag" data-id="'+attachId+'"></a></span></div>');
                bind_remove();
            }
        });
        bind_remove();
        $('[data-role="set-tag"]').click(function(){
            $.post(url('ucenter/Member/set_tag'),{tag_ids:tag_ids},function(msg){
                if(msg.status){
                    toast.success("{:lang('_SUCCESS_SETTINGS_')}{:lang('_EXCLAMATION_')}");
                    setTimeout(function(){
                        window.location.href=msg.url;
                    },1500);
                }else{
                    handleAjax(msg);
                }
            },'json');
        });
    })
    function bind_remove(){
        $('[data-role="remove_tag"]').unbind('click');
        $('[data-role="remove_tag"]').click(function(){
            var attachId=$(this).attr('data-id');
            upHiddenVal('del',attachId);
            $(this).parents('.one_tag').remove();
        });
    }
    function upHiddenVal(type, attachId) {
        var attachArr = tag_ids.split(',');
        var newArr = [];
        var already_show=0;

        for (var i in attachArr) {
            if (attachArr[i] !== '' && attachArr[i] !== attachId.toString()) {
                newArr.push(attachArr[i]);
            }
            if(attachArr[i] === attachId.toString()){
                already_show=1;
            }
        }
        type === 'add' && newArr.push(attachId);
        tag_ids=newArr.join(',');
        return already_show;
    }
</script>